@media screen and (width <= 850px) {
	html {
		font-size: 100%;
	}

	body::after {
		right: 0;
	}

	body::before {
		left: 0;
	}

	img,
	main img,
	main img.center,
	main img.left,
	main img.right {
		display: block;
		float: none;

		width: auto;
		max-width: 100%;
		margin: 1em auto;
	}

	.profile {
		display: block;
		float: none;
		overflow: hidden;

		width: 70%;
		margin: 1em auto;
	}

	main {
		width: 100vw;
	}

	.typl8-mega,
	h1 {
		font-size: 2em;

		margin-bottom: 1.5rem;
	}

	.typl8-alpha,
	h2 {
		font-size: 1.488em;

		margin-bottom: 1.24rem;
	}

	.typl8-beta,
	h3 {
		font-size: 1.074em;

		margin-bottom: 0.61616rem;
	}

	.content-wrapper {
		width: 85vw !important;
		margin-top: 4em !important;
	}

	.content-wrapper a {
		display: inline-block;
		overflow: hidden;

		max-width: 75vw;

		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.small-screen {
		display: block;
		visibility: visible;
	}

	.big-screen {
		display: none !important;
		visibility: hidden;
	}

	.logo,
	.scroll .logo {
		left: calc(50vw - 75px);

		transition: transform, padding, left, top;
	}

	.logo {
		z-index: 10;

		width: 150px;
		height: 150px;
		padding: 53px 0 0;

		transform: scale(1);
	}

	.logo,
	.logo img,
	.scroll .logo,
	.scroll .logo img {
		transition-timing-function: cubic-bezier(1, 0, 0, 1);
		transition-duration: 600ms;
	}

	.scroll .logo {
		top: -75px;

		padding: 80px 0 0;

		transform: scale(1.25);
	}

	.logo img,
	.scroll .logo img {
		transition: transform;
		transform: scale(1);
	}

	.scroll .logo img {
		transform: scale(0.9);
	}

	.logo-hover {
		background-size: 3px 3px;
	}

	.logo-hover.spin {
		animation: none;
		animation: none;
	}

	header,
	nav {
		position: fixed;
		top: 0;
		left: 0;
	}

	header {
		z-index: 800;

		max-height: 100vh;
	}

	#navigation {
		top: 0;
	}

	#navigation.opened nav,
	nav {
		transition: clip-path 600ms, -webkit-clip-path 600ms;
	}

	nav {
		z-index: 99;

		height: 100vh;
		margin: 0;
		padding: 80px 0 0;

		transform-origin: top center;

		background: rgb(50 10 235 / 90%);
		clip-path: circle(0 at 50% 0);
		clip-path: circle(0 at 50% 0);
	}

	#navigation ul {
		font-size: 1.75em;

		overflow: scroll;

		height: calc(100vh - 80px);
		-webkit-overflow-scrolling: touch;

		margin: 0;
	}

	#navigation.opened nav,
	.scroll #toggle,
	nav {
		transition-timing-function: cubic-bezier(1, 0, 0, 1);
	}

	#navigation.opened nav {
		clip-path: circle(200% at 50% 0);
		clip-path: circle(200% at 50% 0);
	}

	table td::before {
		font-weight: 700;

		float: left;

		content: attr(data-label);
		text-transform: uppercase;
	}

	#navigation ul li {
		float: none;

		width: 85%;
		max-width: 15em;
		margin: 0 auto 1em;
	}

	.main-nav-scrolled {
		position: relative;
	}

	#navigation.opened,
	#toggle {
		display: block;
	}

	.scroll #toggle {
		top: 10px;

		transition: top, right, -webkit-transform;
		transition: top, right, transform;
		transition-timing-function: cubic-bezier(1, 0, 0, 1);
		transition-duration: 600ms;
	}

	.footer [class*="cont"],
	[class*="cont"] {
		float: none;

		width: 95%;
		margin: 20px auto;
	}

	.footer {
		font-size: 10pt;

		width: 85vw;

		text-align: center;

		border-top: 2px solid;
	}

	.footer [class*="cont"] {
		border: none;
	}

	.cover_photo {
		padding-bottom: 75%;

		background-attachment: scroll;
	}

	.big-video {
		height: 75vw;
	}

	form input[type="email"],
	form input[type="text"],
	form textarea,
	nav {
		width: 100%;
	}

	input:not([type="submit"], [type="button"]):focus,
	textarea:focus {
		width: 100%;
	}

	#leftside,
	#rightside {
		float: none;

		width: 90%;
		margin: auto;
	}

	#rightside {
		width: 95%;
	}

	.risd {
		right: calc(50vw - 1.5em);
		bottom: 5em;

		width: 3em;
	}
}

@media screen and (height <= 25em) {
	nav ul li:last-child {
		margin-bottom: 6em;
	}
}

@media screen and (width >= 850px) {
	#toggle {
		display: none;
	}

	.js .nav-collapse {
		position: relative;
	}

	.js .nav-collapse.closed {
		max-height: none;
	}
}